<template>
  <PageLayout class="form-container">
    <a-card>
      <div class="form-title">{{ route.query.id ? "编辑" : "新增" }}商户</div>
      <div class="form-box w-600">
        <a-form
          :model="formState"
          :rules="rules"
          ref="formRef"
          layout="Vertical"
          :labelCol="{ style: { width: '100px' } }"
        >
          <a-form-item label="账号" name="username" required>
            <a-input
              v-model:value="formState.username"
              placeholder="请输入账号"
              :maxlength="50"
            />
          </a-form-item>
          <a-form-item label="密码" name="password" required v-if="formState.id == ''">
            <a-input-password
              v-model:value="formState.password"
              placeholder="请输入密码"
              :maxlength="50"
            />
          </a-form-item>
          <a-form-item label="姓名" name="realName" required>
            <a-input
              v-model:value="formState.realName"
              placeholder="请输入姓名"
              :maxlength="50"
            />
          </a-form-item>
          <a-form-item label="身份证号码" name="idCard" required>
            <a-input
              v-model:value="formState.idCard"
              placeholder="请输入身份证号码"
              :maxlength="50"
            />
          </a-form-item>
          <a-form-item label="手机号" name="phone" required>
            <a-input
              v-model:value="formState.phone"
              placeholder="请输入手机号"
              :maxlength="50"
            />
          </a-form-item>
          <a-form-item label="角色" name="roleType" required>
            <a-select
              v-model:value="formState.roleType"
              placeholder="请选择角色"
              :options="roleOptions"
            />
          </a-form-item>

          <a-button
            type="primary"
            class="float-right"
            style="width: 100px"
            @click="save"
            >确定</a-button
          >
        </a-form>
      </div>
    </a-card>
  </PageLayout>
</template>

<script setup>
import {
  postShopUserAdd,
  postShopUserUpdate,
  postShopUserDetail,
} from "@/api/common";
import { useStoreCommonEnum } from "@/store";
import { message } from "ant-design-vue";
import { onMounted } from "vue";
const storeCommonEnum = useStoreCommonEnum();

const route = useRoute();
const router = useRouter();
const formRef = ref(null);

const formState = reactive({
  id: "",
  username: "",
  password: "",
  realName: "",
  idCard: "",
  phone: "",
  roleType: undefined,
});
const roleOptions = ref([
  { label: "管理员", value: 0 },
  { label: "员工", value: 1 },
]);
const detail = ref({});
onMounted(async () => {
  if (route.query.id) {
    postShopUserDetail({
      id: route.query.id,
    }).then((res) => {
      for (let key in formState) {
        formState[key] = res.data[key];
      }
    });
  }
});

const rules = {
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  idCard: [{ required: true, message: "请输入身份证号码", trigger: "blur" }],
  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  roleType: [{ required: true, message: "请选择角色" }],
};

const save = () => {
  formRef.value.validate().then(() => {
    const requestUrl = formState.id ? postShopUserUpdate : postShopUserAdd;
    requestUrl({ ...formState }).then(() => {
      message.success(formState.id ? "编辑成功" : "新增成功");
      router.go(-1);
    });
  });
};
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 24px;
  margin-left: 130px;
  :deep(.ant-btn) {
    margin-right: 16px;
  }
}
</style>
